
import { EChartType, ESubAxisChartType } from "@/core/ChartType";
import ChartForm from "./ChartForm";
import { ChartFormItemContext } from "./ChartFormItem";
import { EChartFormItem, EMateDataType, IChartFormItem, IMateData } from "./ChartItemType";
export default class AxisChartForm extends ChartForm {
    private explorer: ChartFormItemContext;
    private value: ChartFormItemContext;
    // private chartType: ChartFormItemContext;
    // private subChartType: ChartFormItemContext;
    constructor() {
        super();
        this.useFormState("explorer", this.explorer = new ChartFormItemContext({
            label: "统计维度",
            value: "",
            placeHolder: "请选择统计维度的数据",
            // name: "explorer",
            datas: "",
            type: EChartFormItem.Select,
            mateData: {
                type: EMateDataType.String
            }
        }));

        this.useFormState("value", this.value = new ChartFormItemContext({
            label: "数据维度",
            value: "",
            placeHolder: "请选择数据维度的数据",
            // name: "value",
            datas: [],
            type: EChartFormItem.Select,
            mateData: {
                type: EMateDataType.Number
            }
        }));

        this.useComputed("legend", [], () => {
            const currentX = this.explorer.data;
            return {
                data: `return $originData.map(item=>item['${currentX}'])`
            }
        });
        this.useComputed("tooltip", [], () => {
            return {
                trigger: 'item'
            }
        });
        this.useComputed("radar", [], () => {
            const currentY = this.value.data;
            return {
                // shape: 'circle',
                indicator: `return ['${currentY.join("','")}'].map(col=>{
                    return {name:col}
                })`
            }
        });
        this.useComputed("series", [], () => {
            const currentY = this.value.data;
            const currentX = this.explorer.data;
            return [
                {
                    name: 'Budget vs spending',
                    type: 'radar',
                    data: `return $originData.map(item=>{
                                            return {
                                                value:[${currentY.map((colName: any) => "item." + colName).join(",")}]
                                                name:item['${currentX}']
                                            }
                                        })`
                }
            ]
        });
    }

    chartDataComputed() { }

}